<template>
  <div class="head">
    <el-col type="flex" align="left" :span="4">
      <div>物联网平台|健康监测</div>
    </el-col>
    <el-col :span="4" class="tip">
      <div class="huangse">设备总数：{{ deviceStatus.numDevice }}</div>
    </el-col>
    <el-col :span="4" class="tip">
      <div class="huangse">在线总数：{{ deviceStatus.numOnline }}</div>
    </el-col>
    <el-col :span="4" class="tip">
      <div class="huangse">报警总数：{{ deviceStatus.numAlarm }}</div>
    </el-col>
    <el-col type="flex" :span="4">
      <div>设备列表：</div>
    </el-col>
    <el-col type="flex" :span="4">
      <el-select v-model="deviceName" placeholder="请选择">
        <el-option
          v-for="item in deviceInfoList"
          :key="item.id"
          :value="item.deviceName"
        ></el-option>
      </el-select>
    </el-col>
  </div>
</template>

<script>
export default {
  name: 'HeadBox',
  data() {
    return {
      deviceInfoList: [], // 所有设备数据
      deviceName: '', // 当前设备名
      deviceStatus: {}, // 当前设备状态
    }
  },
  mounted() {
    // 调用服务端设备列表接口
    this.$http.get('/v1/deviceInfo/list').then(res => {
      this.deviceInfoList = res.data
      this.deviceName = res.data[0].deviceName
    })
    // 获取设备状态
    this.getDeviceStatus()
    // 警报信息删除时 更新报警总数
    this.$bus.$on('getDeviceStatus', this.getDeviceStatus)
  },
  methods: {
    getDeviceStatus() {
      this.$http.get('/v1/deviceInfo/getDeviceStatus').then(res => {
        this.deviceStatus = res.data
      })
    },
  },
  beforeDestroy() {
    this.$bus.$off('getDeviceStatus')
  },
}
</script>

<style scoped>
.head {
  height: 60px;
  line-height: 60px;
  background: #242b31;
  color: #fff;
  padding: 0 20px;
}
.huangse {
  color: rgb(255, 153, 20);
}
</style>
